﻿@{
    ViewBag.Title = "门店生成图片";
    Layout = "~/Views/Shared/_adminLayout.cshtml";
}

@section Head{
    <style>
        .imgbox {
            position: relative;
        }

        .bigimg {
            position: absolute;
            left: 100px;
            top: 0;
            max-width: 600px;
            border: 10px dashed #000;
            background-color: #fff;
            z-index: 99;
            display: none;
        }

        tr:last-child .bigimg {
            border: 10px dashed #f00;
            top: auto;
            bottom: 0;
        }

        .imgbox:hover .bigimg {
            display: block;
        }
    </style>
}
<h2 class="sub-header">用户生成图片</h2>
<hr />
<a onclick="delAll(this)" class="btn btn-default">批量删除</a>
<hr />

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tbody id="imgList"></tbody>
    </table>
    <div>
        <span id="total"></span>
        <a onclick="home()" class="btn btn-info">首页</a>
        <a onclick="pre()" class="btn btn-info">上一页</a>
        <a onclick="next()" class="btn btn-info">下一页</a>
    </div>
</div>


@section Scripts{
    <script>
        var pageIndex = 0;
        $(function () {
            loadImage();
        })
        function loadImage() {
            $.ajax({
                type: "POST",
                url: "GetSiteUploadfiles",
                dataType: "json",
                data: "pageIndex=" + pageIndex,
                success: function (result) {
                    console.log(result);
                    if (result.state == "success") {
                        var list = result.imglist;
                        var strHtml = '';
                        list.forEach(function (item, index) {
                            strHtml += " <tr data-file='" + item.file + "'>";
                            strHtml += "<td>" + index + "</td>";
                            strHtml += "<td class='imgbox'><img class='preview' src=\"../images/qrcodesite/" + item.file + "\" height=\"100\" /><img class='bigimg' src=\"../images/qrcodesite/" + item.file + "\" /></td>";
                            strHtml += "<td><div class='am-badge'>" + item.sort + "</div></td>";
                            strHtml += " <td>";
                            if (!item.isExisted) {
                                strHtml += " <a onclick=\"delImg('" + item.file + "',this)\" class=\"btn btn-danger\">删除</a>";
                            }
                            strHtml += "</td>";
                            strHtml += "</tr>";
                        })
                        $("#imgList").html(strHtml);
                        var desc = "总计：" + result.total + "  每页：" + result.pageSize + "  当前页：" + (pageIndex + 1)
                        $("#total").text(desc);
                    }
                }
            });
        }
        function home() {
            pageIndex = 0;
            loadImage();
        }
        function pre() {
            pageIndex--;
            pageIndex = pageIndex <= 0 ? 0 : pageIndex;
            loadImage();
        }
        function next() {
            pageIndex++;
            loadImage();
        }
        function delAll(obj) {
            $(obj).attr("disabled", "disabled");
            $("#imgList tr").each(function (index, item) {
                var filename = $(this).data("file");
                console.log(filename);
                if (filename)
                    delImg(filename, this);
            })
        }

        function delImg(filename, obj) {
            $.ajax({
                type: "POST",
                url: "DelSiteUploadfiles",
                dataType: "json",
                data: "imgname=" + filename,
                success: function (result) {
                    console.log(result);
                    if (result.state == "success") {
                        $(obj).closest("tr").remove();
                    }
                }
            });
        }

    </script>
}


